<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>AJAX Friend Manager</title>
    <s:head/>

<link rel="stylesheet" href="<s:url value="/styles/ui.datepicker.css" />" type="text/css" media="screen">   
<style type="text/css">
#friendFormDiv {
  display:none;
}
#friendListTable {
  text-align:center;
  width:500px;
}
#errors {
  font-weight: bold;
  text-align: center;
  color: red;
}
</style>

<script type="text/javascript" src="<s:url value="/javascript/jquery-1.2.6.js"/>"></script>
<script type="text/javascript" src="<s:url value="/javascript/jquery.livequery.js"/>"></script>
<script type="text/javascript" src="<s:url value="/javascript/ui.datepicker.js"/>"></script>
<script type="text/javascript"> 
$(document).ready(function() {

	$("#addFriendLink").livequery("click", function(event){
		$("#friendFormDiv").show();
		$("#person\\.personId").val("");
		$("#person\\.personName").val("");
		$("#person\\.birthDay").val("");
		$("#person\\.coolness").val("");
	  });
	
	$.getJSON("<s:url value="/person-list" />", 
		function(json){ handleFriendList(json);}
	);
	
	$("#friendForm").livequery("submit",
	  function(event) {
		var strDate ; 
		if ($("#person\\.birthDay").val() != "") {
		  var inputDate = $("#person\\.birthDay").datepicker("getDate");
		  strDate =
				inputDate.getFullYear() + "-" + 
				(inputDate.getMonth() > 8 ? inputDate.getMonth() + 1 
						: '0' + (inputDate.getMonth() + 1) ) + "-" +  
				(inputDate.getDate() > 9 ? inputDate.getDate() 
						: '0' + inputDate.getDate() ) + "T00:00:00" ;
		}
		var formData = {
				"person.birthDay": strDate,
				"person.personId" : $("#person\\.personId").val(),
				"person.personName" : $("#person\\.personName").val(),
				"person.coolness" : $("#person\\.coolness").val() 
				};
		$.post("<s:url value="/person-submit" />", formData,
			function(json){handleFriendList(json);}, "json" );
		return false;
	  });

	$("#person\\.birthDay").datepicker( {
				yearRange: "-100:+0", 
	    		showOn: "both", 
	    		buttonImage: "<s:url value="/images/calendar.gif" />", 
	    		buttonImageOnly: true } );

	$.datepicker.regional['en-au'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-au']);

	$.datepicker.regional['en-gb'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-gb']);

	$.datepicker.regional['en-nz'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-nz']);

	$.datepicker.regional['en-ie'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-ie']);

	$.datepicker.regional['en-za'] =  {
			dateFormat: "yy/mm/dd"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-za']);

	$.datepicker.regional['en-in'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-in']);

	$.datepicker.regional['en-ca'] =  {
			dateFormat: "dd/mm/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-ca']);

	$.datepicker.regional['en-us'] =  {
			dateFormat: "mm/dd/yy"
		}
	$.datepicker.setDefaults($.datepicker.regional['en-us']);
	
});

function handleFriendList(json) {
	if (json && json.length == 0 ) {
		$("#friendList").html("");
	}
	else if (json && json.length > 0 && json[0].coolness ) {
		var friendListTable = "<table id=\"friendListTable\"><tr>";
		friendListTable = friendListTable + 
			"<th>Name</th><th>Birth Day</th><th>Coolness</th><th>Update</th>";
		$.each(json, function() {
			var dt = dateFilter(this.birthDay);
			friendListTable = friendListTable + 
				"<tr><td>" + this.personName + 
				"</td><td>" + dt.toDateString() + 
				"</td><td>" + this.coolness + 
				"</td><td><a href=\"#\" id=\"editPerson" 
				+ this.personId + "\">edit</a> " + 
				"<a href=\"#\" id=\"deletePerson" 
				+ this.personId + "\">delete</a></td></tr>";
		});
		friendListTable = friendListTable + "</table>";
		$("#friendList").html(friendListTable);
		
		$.each(json, function(indexInArray, valueOfElement) {
			var editLink = "#editPerson" + valueOfElement.personId;
			$(editLink).expire();
			$(editLink).livequery("click", 
			  function(event) {
				var dt = dateFilter(valueOfElement.birthDay);
				$("#person\\.personId").val(valueOfElement.personId);
				$("#person\\.personName").val(valueOfElement.personName);
				$("#person\\.birthDay").datepicker("setDate", dt);
				$("#person\\.coolness").val(valueOfElement.coolness);
				$("#friendFormDiv").show();
				$("#errors").empty();
				return false;
			  });
			var delLink = "#deletePerson" + valueOfElement.personId;
			$(delLink).expire();
			$(delLink).livequery("click", 
			  function(event) {
				$.post("<s:url value="/person-delete" />", 
					{"person.personId" : valueOfElement.personId },
					function(json) {handleFriendList(json);}, "json" );
				return false;
			  });
		});
		$("#friendFormDiv").hide();
		$("#errors").empty();
	}
	else {
		$("#errors").empty();
		for (field in json) {
			$("#errors").append(json[field] + "<br />");
		}
	}
}

function dateFilter(v) {
	var k;
	return (typeof v == "string" && (
			k=v.match(/([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})$/))) 
	  ? new Date(k[1],k[2]-1,k[3],k[4],k[5],k[6]) 
	  : v;
}

</script>

</head>

<body>

<h2>The AJAX Friend Manager Application</h2>

<div id="friendList"></div>
<br />
<div id="addFriendLinkDiv"><a href="#" id="addFriendLink">New Friend</a></div>
<br />
<div id="friendFormDiv">
<form name="friendForm" id="friendForm">
<s:hidden key="person.personId" id="person.personId" />
<table>
	<tr>
		<td align="right">Name:</td>
		<td><s:textfield id="person.personName" 
				key="person.personName" theme="simple"/></td>
	</tr>
	<tr>
		<td align="right">Birthday:</td>
		<td><s:textfield id="person.birthDay" 
				key="person.birthDay" theme="simple" />
		</td>
	</tr>
	<tr>
		<td align="right">Coolness Factor:</td>
		<td><s:select name="person.coolness" 
				id="person.coolness" 
				list="{1,2,3,4,5}" 
				theme="simple"
				value="person.coolness" /></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="submit" value="submit" />
	</tr>
</table>
</form>
<span id="errors"></span>
</div>
</body>
</html>